<template>
    <div class="container">
        <!-- 标题 -->
        <div class="navText">
            <span>收藏的商品</span>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="orderArea">
                <div v-if="orderNum != 0" class="haveOrder">

                </div>
                <div v-else class="noOrder">
                    <div class="box">
                        <div class="noOrderLeft">
                            <svg class="icon">
                                <use xlink:href="#icon-meiyoushoucang"></use>
                            </svg>
                        </div>
                        <div class="noOrderRight">
                            <div>暂时还木有收藏商品哦~</div>
                            <!-- <div>
                                <span>去查看</span>
                                <span>全部订单</span>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "myProductCollect",
    data() {
        return {
            orderNum: 0,
        }
    },
    methods: {

    }
}
</script>

<style scoped lang="scss">
.container {
    width: 80%;
    height: 500px;
    margin-left: 25px;
    // background-color: red;

    .navText {
        height: 40px;
        width: 100%;
        background: #f1f1f1;
        padding: 0 20px;


        span {
            line-height: 40px;
            font-weight: 700;
            color: black;
        }
    }

    // 内容区域
    .content {
        .orderArea {
            margin-top: 15px;
            height: 300px;


            .haveOrder {}

            .noOrder {
                height: 300px;
                width: 100%;
                display: flex;
                justify-content: center;
                align-content: center;
                // padding-bottom: 100px;


                .box {
                    width: 100%;
                    height: 100%;
                    /* 继承父容器高度 */
                    display: flex;
                    justify-content: center;
                    align-items: center;


                    .noOrderLeft {

                        // background-color: red;
                        .icon {
                            width: 80px;
                            height: 50px;
                        }

                    }

                    .noOrderRight {

                        // background-color: pink;
                        div:nth-child(1) {
                            color: #00bebf;
                            font-size: 14px;
                            font-weight: bold;
                            padding-bottom: 0px;
                            line-height: 22px;
                        }

                        div:nth-child(2) {
                            span:nth-child(2) {
                                color: #1890ff;
                                margin-left: 10px;
                            }
                        }

                    }
                }
            }
        }
    }
}
</style>